import axios from 'axios'
import { Toast } from 'vant'
import store from '@/store'
// 创建 axios 实例，将来对创建出来的实例，进行自定义配置
// 好处：不会污染原始的 axios 实例
const instance = axios.create({
  baseURL: 'http://smart-shop.itheima.net/index.php?s=/api',
  timeout: 5000,
  headers: { platform: 'H5' }
})

// 自定义配置 - 请求/响应 拦截器 - axios 改为 instance
// 添加请求拦截器
instance.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  // 开启 loading，禁止背景点击（节流处理，防止多次无效触发）
  Toast.loading({
    message: '加载中...',
    forbidClick: true,
    loadingType: 'spinner', // 配置 loading 图标
    duration: 0 // 不会自动消失，默认是2s后消失，不太合理，应是请求后消失，在响应拦截器关闭
  })

  // 在请求拦截器中配置 token
  // 只要有token，就在请求时携带，便于请求需要授权的接口
  const token = store.getters.token
  if (token) {
    // 对象中含特殊字符写成中括号加引号的形式
    config.headers['Access-Token'] = token
  }

  return config
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error)
})

// 添加响应拦截器
instance.interceptors.response.use(function (response) {
  // 2xx 范围内的状态码都会触发该函数。
  // 对响应数据做点什么 （默认 axios 会多包装一层 data，需要响应拦截器中处理一下）
  const res = response.data
  // console.log(res)
  if (res.status !== 200) {
    // 给错误提示
    // Toast 默认是单例模式，后面的 Toast 如果调用了，前一个的 Toast 效果会被覆盖，同时只能存在一个 Toast
    Toast(res.message)
    // 抛出一个错误的 promise
    return Promise.reject(res.message)
  } else {
    // 正确情况，直接走业务核心逻辑，清除 loading 效果
    Toast.clear()
  }

  return res
}, function (error) {
  // 超出 2xx 范围的状态码都会触发该函数。
  // 对响应错误做点什么
  return Promise.reject(error)
})

// 导出配置好的实例
export default instance
